import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Checkbox } from 'antd'
import { base64_to_str, str_to_base64 } from '../../utils/utils'



const CheckboxGroup = Checkbox.Group;

const defaultCheckedList = [];
@inject("AdminStore")
@inject("standard_face_database_store")
@observer
export default class Checkbox_group extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            checkedList: defaultCheckedList,
            indeterminate: false,
            checkAll: false,
        };
        //深拷贝之后重新赋值
        let newFaceStoreList = []
        for (let [index, item] of this.props.standard_face_database_store.newFaceStoreList.entries()) {
            newFaceStoreList.push(item)
        }
        for (let [index, item] of newFaceStoreList.entries()) {
            newFaceStoreList[index] = base64_to_str(item)
        }
       
        this.plainOptions = newFaceStoreList
        console.log(this.plainOptions)
        
    }

    deep_copy_set_checkedList=() => {
        let newFaceStoreList = []
        for (let [index, item] of this.state.checkedList.entries()) {
            newFaceStoreList.push(item)
        }
        for (let [index, item] of newFaceStoreList.entries()) {
            newFaceStoreList[index] = str_to_base64(item)
        }
        this.props.standard_face_database_store.change_checkedList(newFaceStoreList)
    }
    onChange = checkedList => {
        this.setState({
            checkedList,
            indeterminate: !!checkedList.length && checkedList.length < this.plainOptions.length,
            checkAll: checkedList.length === this.plainOptions.length,
        }, () => {
            //深拷贝之后重新赋值
            this.deep_copy_set_checkedList()
          
        });


    };

    onCheckAllChange = e => {
        this.setState({
            checkedList: e.target.checked ? this.plainOptions : [],
            indeterminate: false,
            checkAll: e.target.checked,
        },() => {
              //深拷贝之后重新赋值
              this.deep_copy_set_checkedList()
        });
    };

    render() {
        return (
            <div>
                <div style={{ }}>
                    <Checkbox
                        indeterminate={this.state.indeterminate}
                        onChange={this.onCheckAllChange}
                        checked={this.state.checkAll}
                    >
                        全选
          </Checkbox>
                </div>
                <br />
                <CheckboxGroup
                    style={{ width: "100px" }}
                    options={this.plainOptions}
                    value={this.state.checkedList}
                    onChange={this.onChange}
                />
            </div>
        );
    }
}